<template>
	<view class="page flex-col">
		<view class="group_1 flex-col">
			<view class="section_1 flex-col">
				<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>
				<!-- <nav-bar title="财务收入" :color="navBarColor" :bg="navBarBg" /> -->
				<view class="image-wrapper_1 flex-row justify-between">
					<image class="image_2" referrerpolicy="no-referrer" @click="rafflelist"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/758b9948da59c4ddc9f2df2826966f4dd4b20d0c.png" />
					<image class="image_3" referrerpolicy="no-referrer" @click="myprizelist"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f250aa1e5efdc8d613f5cda4397cb34061113151.png" />
				</view>
			</view>
		</view>
		<view class="tabs_1 flex-col">

			<u-tabs :list="tabsList" lineColor="#FE6146 " :activeStyle="{
				  color: '#FE6146 ',
				}" :inactiveStyle="{
				  color: '#c2c1c1',
				}" :lineWidth="30" :current="currentTab" @click="onClickTab" />
		</view>
		<view class="group_3 flex-col">
			<!-- <view class="tabs_1 flex-col">
				<u-sticky :customNavHeight="navbarHeigth" v-if="navbarHeigth">
				<u-tabs :list="tabsList" lineColor="#FE6146 " :activeStyle="{
				  color: '#FE6146 ',
				}" :inactiveStyle="{
				  color: '#c2c1c1',
				}" :lineWidth="30" :current="currentTab" @click="onClickTab" />
				</u-sticky>
			</view> -->
			<!-- <view style="width: 100%;height: 80rpx;"></view> -->
			<scroll-view scroll-y style="width: 100%;height: 1000rpx;background-color: #fff;" v-if="wrapperlist.length">
				<view class="box_2 flex-col" v-for="(item, index) in wrapperlist" :key="index" v-if="currentnum == 0" @click="wrapper_list(item, index)">
					<view class="text-wrapper_2 flex-row">
						<text class="text_5">{{item.name}}</text>
					</view>
					<view class="block_2 flex-row justify-between">
						<view class="image-text_1 flex-row justify-between">
							<image class="icon_2" referrerpolicy="no-referrer" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/574c6a0a3f1235c9146587cf392568a0abeb0a79.png" />
							<text class="text-group_1">{{item.app_name}}</text>
						</view>
						<text class="text_6">{{item.start_time}}&nbsp;{{item.end_time}}</text>
					</view>
					<!-- <image class="image_4" referrerpolicy="no-referrer"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/bdbd386e8884ee841deccfb684b8d8d758c962ca.png" /> -->
					<image class="image_5" referrerpolicy="no-referrer" :src="item.image" />
				</view>
				<view class="box_2 flex-col" v-for="(item, index) in wrapperlist" :key="index" v-if="currentnum == 1">
					<view class="text-wrapper_2 flex-row">
						<text class="text_5">{{item.name}}</text>
					</view>
					<view class="block_2 flex-row justify-between">
						<view class="image-text_1 flex-row justify-between">
							<image class="icon_2" referrerpolicy="no-referrer" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/574c6a0a3f1235c9146587cf392568a0abeb0a79.png" />
							<text class="text-group_1">{{item.app_name}}</text>
						</view>
						<text class="text_6">{{item.start_time}}&nbsp;{{item.end_time}}</text>
					</view>
					<image class="image_5" referrerpolicy="no-referrer" :src="item.image" />
				</view>
				<view class="box_2 flex-col" v-for="(item, index) in wrapperlist" :key="index" v-if="currentnum == 2">
					<view class="text-wrapper_2 flex-row">
						<text class="text_5">{{item.name}}</text>
					</view>
					<view class="block_2 flex-row justify-between">
						<view class="image-text_1 flex-row justify-between">
							<image class="icon_2" referrerpolicy="no-referrer" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/574c6a0a3f1235c9146587cf392568a0abeb0a79.png" />
							<text class="text-group_1">{{item.app_name}}</text>
						</view>
						<text class="text_6">{{item.start_time}}&nbsp;{{item.end_time}}</text>
					</view>
					<image class="image_5" referrerpolicy="no-referrer" :src="item.image" />
				</view>

			</scroll-view>

			<u-empty v-else text="暂无数据" icon="https://sass-test.doit10019.com/upload/202501/08114139-33838600519097990.jpg?attname=coupon.jpg" />
		</view>
	</view>
</template>
<script>
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	const market = require("@/api/market/index.js");
	export default {
		components: {
			QSNavbar
		},
		data() {
			return {
				constants: {},
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "left",
						width: 15,
						doEvent: "back",
						iconColor: "#fff",
					},
					{
						type: "text",
						text: "幸运抽奖",
						width: 70,
						weight: "bold",
						color: "#fff",
						textAlign: "left",
					},
				],
				// navbarItems_1: [{
				// 	layout: "left",
				// 	type: "text",
				// 	text: "领券中心",
				// 	width: 50,
				// 	weight: "bold",
				// 	color: "#fff",
				// }, ],
				wrapperlist: [],
				navbarHeigth: null,
				tabsList: [
					// {
					// 	name: "未开始"
					// },
					{
						name: "进行中"
					},
					{
						name: "已结束"
					}
				],
				currentTab: 0,
				currentnum: 0,
				listQuery: { //分页
					pageNo: 1,
					pageSize: 8,
				},
				totalPage: '', //几页
			};
		},
		onLoad() {
			// uni.setNavigationBarTitle({
			// 	title: '领券中心'
			// });
			this.getLotteryActivity()
		},
		methods: {
			async getLotteryActivity() {
				let currentTab = this.currentTab + 2
				let that = this;
				if (this.listQuery.pageNo === 1) that.wrapperlist = [];
				let postData = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					type: currentTab,
					page: this.listQuery.pageNo,
					limit: this.listQuery.pageSize,
				}
				let res = await market.getLotteryActivity(postData);
				if (res.code == 1) {
					that.wrapperlist = that.wrapperlist.concat(res.data.result.data); //将数据拼接在一起
					that.totalPage = res.data.result.last_page
				}
			},
			// 滚动加载
			onReachBottom() {
				uni.showLoading({
					title: '加载中'
				});
				if (this.totalPage <= this.listQuery.pageNo) {
					uni.hideLoading();
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1;
				this.getLotteryActivity()
			},
			
			wrapper_list(item, index) {
				console.log(123132)					uni.navigateTo({						url: '../luckydraw/luckydraw?id=' + item.id					})			},			// 抽奖记录			rafflelist() {				uni.navigateTo({					url: '/page_luckdraw/raffle/raffle'				})			},			// 我的奖品			myprizelist() {				uni.navigateTo({					url: '/page_luckdraw/myprize/myprize'				})			},
			onClickTab({
				index
			}) {
				console.log(index, '23')
				this.currentTab = index;
				this.currentnum = index;
				this.wrapperlist = []
				this.getLotteryActivity()
			},
		}
	};
</script>
<style lang='scss'>
	@import '../../static/css/common/common.scss';

	.page {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;



		.group_1 {

			.section_1 {
				width: 100%;
				height: 610rpx;
				background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/6a6b641e4003ed03e5afa7dccf8698ab89ac9879.png') 100% no-repeat;
				background-size: 100% 100%;
				/* position: fixed; */
				/* z-index: 999; */

				.image_1 {
					width: 654rpx;
					height: 22rpx;
					margin: 33rpx 0 0 48rpx;
				}

				.nav-bar_1 {
					width: 743rpx;
					height: 91rpx;
					margin-top: 25rpx;

					.group_2 {
						height: 36rpx;
						width: 185rpx;
						margin: 34rpx 0 0 30rpx;

						.box_1 {
							width: 185rpx;
							height: 36rpx;

							.icon_1 {
								width: 20rpx;
								height: 36rpx;
							}

							.text_1 {
								width: 146rpx;
								height: 35rpx;
								overflow-wrap: break-word;
								color: rgba(255, 255, 255, 1);
								font-size: 36rpx;
								font-family: PingFang-SC-Regular;
								font-weight: NaN;
								text-align: left;
								white-space: nowrap;
								line-height: 34rpx;
								margin-top: 1rpx;
							}
						}
					}

					.applet-top-bar_1 {
						width: 150rpx;
						height: 55rpx;
						margin: 20rpx 24rpx 0 354rpx;
					}
				}

				.image-wrapper_1 {
					width: 717rpx;
					height: 158rpx;
					margin: 281rpx 0 46rpx 17rpx;

					.image_2 {
						width: 357rpx;
						height: 158rpx;
					}

					.image_3 {
						width: 357rpx;
						height: 158rpx;
					}
				}
			}
		}

		.tabs_1 {
			width: 750rpx;
			height: 110rpx;
			/* position: fixed; */
			/* z-index: 999; */
			top: 610rpx;

			/deep/.u-tabs {
				background-color: #fff;

				.u-tabs__wrapper__nav__item {
					flex: 1;
				}

				.u-tabs__wrapper__nav__line {
					bottom: 0;
				}
			}

			.text-wrapper_1 {
				width: 506rpx;
				height: 29rpx;
				margin: 39rpx 0 0 120rpx;

				.text_2 {
					width: 89rpx;
					height: 29rpx;
					overflow-wrap: break-word;
					color: rgba(254, 97, 70, 1);
					font-size: 30rpx;
					font-family: PingFang-SC-Medium;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 30rpx;
				}

				.text_3 {
					width: 86rpx;
					height: 28rpx;
					overflow-wrap: break-word;
					color: rgba(51, 51, 51, 1);
					font-size: 30rpx;
					font-family: PingFang-SC-Medium;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 30rpx;
					margin: 1rpx 0 0 122rpx;
				}

				.text_4 {
					width: 87rpx;
					height: 28rpx;
					overflow-wrap: break-word;
					color: rgba(51, 51, 51, 1);
					font-size: 30rpx;
					font-family: PingFang-SC-Medium;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 30rpx;
					margin: 1rpx 0 0 122rpx;
				}
			}

			.block_1 {
				width: 53rpx;
				height: 6rpx;
				margin: 20rpx 0 16rpx 138rpx;

				.section_2 {
					background-color: rgba(254, 97, 70, 1);
					border-radius: 3px;
					width: 53rpx;
					height: 6rpx;
				}
			}
		}

		.group_3 {
			/* 	position: absolute;
			left: 0;
			top: 611rpx;
			width: 100%;
			height: 100%; */

			/* background-color: #ffff7f; */
			/* background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/d48cfd0a655a611e79d542d9c85d8325d119bcee.png') 0rpx 0rpx no-repeat; */
			/* background-size: 750rpx 1676rpx; */



			.box_2 {
				box-shadow: 0px 13px 57px 0px rgba(8, 73, 162, 0.11);
				background-color: rgba(255, 255, 255, 1);
				border-radius: 16px;
				height: 430rpx;
				width: 92%;
				position: relative;
				margin: -1rpx 0 0 30rpx;
				margin-top: 20rpx;

				.text-wrapper_2 {
					width: 194rpx;
					height: 26rpx;
					margin: 319rpx 0 0 21rpx;

					.text_5 {
						width: 194rpx;
						height: 26rpx;
						overflow-wrap: break-word;
						color: rgba(51, 51, 51, 1);
						font-size: 28rpx;
						font-family: PingFang-SC-Medium;
						font-weight: 500;
						text-align: left;
						white-space: nowrap;
						line-height: 28rpx;
					}
				}

				.block_2 {
					width: 649rpx;
					height: 30rpx;
					margin: 27rpx 0 16rpx 21rpx;

					.image-text_1 {
						width: 183rpx;
						height: 30rpx;

						.icon_2 {
							width: 30rpx;
							height: 30rpx;
						}

						.text-group_1 {
							width: 142rpx;
							height: 23rpx;
							overflow-wrap: break-word;
							color: rgba(153, 153, 153, 1);
							font-size: 24rpx;
							font-family: PingFang-SC-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 24rpx;
							margin-top: 3rpx;
						}
					}

					.text_6 {
						width: 48%;
						height: 23rpx;
						overflow-wrap: break-word;
						color: rgba(153, 153, 153, 1);
						font-size: 24rpx;
						font-family: PingFang-SC-Medium;
						font-weight: 500;
						text-align: left;
						white-space: nowrap;
						line-height: 24rpx;
						margin-top: 3rpx;
					}
				}

				.image_4 {
					position: absolute;
					left: -1rpx;
					top: 36rpx;
					width: 180rpx;
					height: 180rpx;
				}

				.image_5 {
					position: absolute;
					left: 0;
					top: -1rpx;
					width: 690rpx;
					height: 300rpx;
				}
			}

			.box_3 {
				box-shadow: 0px 13px 57px 0px rgba(8, 73, 162, 0.11);
				background-color: rgba(255, 255, 255, 1);
				border-radius: 16px;
				height: 418rpx;
				width: 690rpx;
				position: relative;
				margin: 33rpx 0 0 30rpx;

				.text-wrapper_3 {
					width: 110rpx;
					height: 27rpx;
					margin: 318rpx 0 0 21rpx;

					.text_7 {
						width: 110rpx;
						height: 27rpx;
						overflow-wrap: break-word;
						color: rgba(51, 51, 51, 1);
						font-size: 28rpx;
						font-family: PingFang-SC-Medium;
						font-weight: 500;
						text-align: left;
						white-space: nowrap;
						line-height: 28rpx;
					}
				}

				.box_4 {
					width: 649rpx;
					height: 30rpx;
					margin: 28rpx 0 15rpx 21rpx;

					.image-text_2 {
						width: 183rpx;
						height: 30rpx;

						.icon_3 {
							width: 30rpx;
							height: 30rpx;
						}

						.text-group_2 {
							width: 142rpx;
							height: 23rpx;
							overflow-wrap: break-word;
							color: rgba(153, 153, 153, 1);
							font-size: 24rpx;
							font-family: PingFang-SC-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 24rpx;
							margin-top: 3rpx;
						}
					}

					.text_8 {
						width: 228rpx;
						height: 23rpx;
						overflow-wrap: break-word;
						color: rgba(153, 153, 153, 1);
						font-size: 24rpx;
						font-family: PingFang-SC-Medium;
						font-weight: 500;
						text-align: left;
						white-space: nowrap;
						line-height: 24rpx;
						margin-top: 2rpx;
					}
				}

				.image_6 {
					position: absolute;
					left: -1rpx;
					top: 36rpx;
					width: 180rpx;
					height: 180rpx;
				}

				.image_7 {
					position: absolute;
					left: 0;
					top: -1rpx;
					width: 690rpx;
					height: 300rpx;
				}
			}

			.box_5 {
				box-shadow: 0px 13px 57px 0px rgba(8, 73, 162, 0.11);
				background-color: rgba(255, 255, 255, 1);
				border-radius: 16px;
				height: 418rpx;
				width: 690rpx;
				position: relative;
				margin: 31rpx 0 27rpx 30rpx;

				.text-wrapper_4 {
					width: 110rpx;
					height: 27rpx;
					margin: 318rpx 0 0 21rpx;

					.text_9 {
						width: 110rpx;
						height: 27rpx;
						overflow-wrap: break-word;
						color: rgba(51, 51, 51, 1);
						font-size: 28rpx;
						font-family: PingFang-SC-Medium;
						font-weight: 500;
						text-align: left;
						white-space: nowrap;
						line-height: 28rpx;
					}
				}

				.box_6 {
					width: 650rpx;
					height: 27rpx;
					margin: 29rpx 0 17rpx 20rpx;

					.image-text_3 {
						width: 160rpx;
						height: 27rpx;

						.icon_4 {
							width: 32rpx;
							height: 27rpx;
						}

						.text-group_3 {
							width: 118rpx;
							height: 23rpx;
							overflow-wrap: break-word;
							color: rgba(153, 153, 153, 1);
							font-size: 24rpx;
							font-family: PingFang-SC-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 24rpx;
							margin-top: 2rpx;
						}
					}

					.text_10 {
						width: 228rpx;
						height: 23rpx;
						overflow-wrap: break-word;
						color: rgba(153, 153, 153, 1);
						font-size: 24rpx;
						font-family: PingFang-SC-Medium;
						font-weight: 500;
						text-align: left;
						white-space: nowrap;
						line-height: 24rpx;
						margin-top: 1rpx;
					}
				}

				.image_8 {
					position: absolute;
					left: -1rpx;
					top: 36rpx;
					width: 180rpx;
					height: 180rpx;
				}

				.image_9 {
					position: absolute;
					left: 0;
					top: -1rpx;
					width: 690rpx;
					height: 300rpx;
				}
			}
		}
	}
</style>
